<template>
  <div
    class="frame-ddQ-2"
    :class="{ 'dark-gray': isBoardDisabled || props.testInfo.endtime }"
  >
    <div class="vec-rectangle-Pmi-2"></div>
    <div class="text-lwB-3">
      <div class="p-text-lwB-3">
        <span class="span-zfe-1" style="margin-right: 10px">{{
          props.type == "ic"
            ? "集成电路板卡" + props.boardid
            : "功率器件板卡" + props.boardid
        }}</span>
        <svg-icon
          icon-class="stopdl"
          v-if="
            !props.testInfo.endtime &&
            !isBoardDisabled &&
            props.status &&
            props.status != '断电' &&
            props.status != ''
          "
          width="20"
          height="20"
          @click="sendData"
        >
          <!-- 设置圆心坐标和半径，填充颜色为黑色 -->
          <!-- <circle cx="10" cy="10" r="10" fill="black" /> -->
        </svg-icon>
      </div>
    </div>
    <div class="frame-VFE-4">
      <div class="vec-rectangle-ABe-1"></div>
      <div class="frame-rFu-2">
        <!-- 正常状态，使用 props 动态展示数量 -->
        <div class="frame-bPs-1">
          <div class="text-AbU-1">
            <div class="p-text-AbU-1">
              <span class="span-hDV-1">{{ status_cnt1 }}</span>
            </div>
          </div>
          <div class="frame-wnT-2">
            <div class="text-jKj-1">
              <div class="p-text-jKj-1">
                <span class="span-EXI-1">正常</span>
              </div>
            </div>
            <div class="vec-circular-UGO-2"></div>
          </div>
        </div>
        <!-- 烧毁状态，使用 props 动态展示数量 -->
        <div class="frame-bPs-1">
          <div class="text-AbU-1">
            <div class="p-text-AbU-1">
              <span class="span-hDV-1">{{ status_cnt2 }}</span>
            </div>
          </div>
          <div class="frame-wnT-2" style="background: rgba(255, 240, 238, 1)">
            <div class="text-jKj-1">
              <div class="p-text-jKj-1">
                <span class="span-EXI-1" style="color: rgba(252, 136, 0, 1)"
                  >{{ props.type == "ic" ? "闩锁" : "烧毁" }}
                </span>
              </div>
            </div>
            <div
              class="vec-circular-UGO-2"
              style="background: rgba(249, 57, 32, 1)"
            ></div>
          </div>
        </div>
        <!-- 退化状态，使用 props 动态展示数量 -->
        <div class="frame-bPs-1">
          <div class="text-AbU-1">
            <div class="p-text-AbU-1">
              <span class="span-hDV-1">{{ status_cnt3 }}</span>
            </div>
          </div>
          <div class="frame-wnT-2" style="background: rgba(252, 136, 0, 0.08)">
            <div class="text-jKj-1">
              <div class="p-text-jKj-1">
                <span class="span-EXI-1" style="color: rgba(252, 136, 0, 1)">{{
                  props.type == "ic" ? "BRAM" : "退化"
                }}</span>
              </div>
            </div>
            <div
              class="vec-circular-UGO-2"
              style="background: rgba(252, 136, 0, 1)"
            ></div>
          </div>
        </div>
        <!-- 断电状态，使用 props 动态展示数量 -->
        <div class="frame-bPs-1">
          <div class="text-AbU-1">
            <div class="p-text-AbU-1">
              <span class="span-hDV-1">{{ status_cnt4 }}</span>
            </div>
          </div>
          <div
            class="frame-wnT-2"
            style="background: rgba(110, 116, 122, 0.08)"
          >
            <div class="text-jKj-1">
              <div class="p-text-jKj-1">
                <span
                  class="span-EXI-1"
                  :style="{
                    color:
                      props.type == 'ic'
                        ? 'rgba(255, 200, 0,1 )'
                        : 'rgba(110, 116, 122, 1)',
                  }"
                  >{{ props.type == "ic" ? "CRAM" : "断电" }}</span
                >
              </div>
            </div>
            <div
              class="vec-circular-UGO-2"
              style="background: rgba(110, 116, 122, 1)"
            ></div>
          </div>
        </div>
      </div>
      <div class="frame-EQG-3">
        <div class="text-avs-1">
          <div class="p-text-avs-1">
            <span class="span-kAJ-1">运行状态</span>
          </div>
        </div>
        <div class="img-Buz-2"></div>
      </div>
    </div>
    <div class="frame-MzU-5">
      <div class="vec-rectangle-bZV-1"></div>
      <div class="frame-jOr-2">
        <div class="img-mNF-1"></div>
        <div class="text-Lqx-2">
          <div class="p-text-Lqx-2">
            <span class="span-rvc-1">测试时长</span>
          </div>
        </div>
        <div class="text-Fha-4">
          <div class="p-text-Fha-4">
            <!-- 使用 props 动态展示测试时长 -->
            <span class="span-Eoc-1">
              {{
                isBoardDisabled
                  ? "00:00:00"
                  : formatMilliseconds(
                      new Date(props.datatimestamp) -
                        new Date(props.testInfo.starttime)
                    )
              }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="frame-OqG-6">
      <div class="vec-rectangle-rdK-1"></div>
      <div class="img-CwJ-2"></div>
      <div class="frame-RAu-3">
        <div class="text-tYz-1">
          <div class="p-text-tYz-1">
            <span class="span-kll-1">电压（V）</span>
          </div>
        </div>
        <div class="text-ttP-3">
          <div class="p-text-ttP-3">
            <!-- 使用 props 动态展示电压 -->
            <span class="span-WHX-1">{{ voltage }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="frame-YPa-7" v-if="temperature">
      <div class="vec-rectangle-lXg-1"></div>
      <div class="frame-fQX-2">
        <div class="img-tUg-1"></div>
        <div class="text-dPE-2">
          <div class="p-text-dPE-2">
            <span class="span-NaK-1">温度（℃）</span>
          </div>
        </div>
        <div class="text-FyT-4">
          <div class="p-text-FyT-4">
            <!-- 使用 props 动态展示温度 -->
            <span class="span-ZFx-1">{{ temperature }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="frame-Ill-8">
      <div class="img-AiC-1"></div>
      <div class="text-vmW-2">
        <div class="p-text-vmW-2">
          <span
            class="span-Yqw-1"
            v-if="!isBoardDisabled"
            @click="state.testcenterVisible = true"
            >查看</span
          >
        </div>
      </div>
    </div>
    <div class="vec-rectangle-IoV-9"></div>
  </div>
  <el-dialog
    v-model="state.testcenterVisible"
    :title="'数据中心-板卡' + props.boardid"
    width="90%"
    top="10px"
    :destroy-on-close="true"
  >
    <GLDataCenter
      v-if="props.type == 'pd'"
      :type="props.type"
      :testid="props.testid"
      :boardid="props.boardid"
      :testInfo="props.testInfo"
      :enableboardstatus="props.enableboardstatus"
      :datasourceindex="props.datasourceindex"
      :deviceid="props.deviceid"
    ></GLDataCenter>
    <JCDataCenter
      v-if="props.type == 'ic'"
      :testid="props.testid"
      :boardid="props.boardid"
      :testInfo="props.testInfo"
      :boardType="props.boardType"
      :enableboardstatus="props.enableboardstatus"
      :datasourceindex="props.datasourceindex"
      :type="props.type"
      :deviceid="props.deviceid"
    ></JCDataCenter>
  </el-dialog>
</template>

<script setup>
import { defineProps, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { sendControl } from "@/api/device/mqttSend";
import GLDataCenter from "@/views/datacenter/gldatacenter";
import JCDataCenter from "@/views/datacenter/jcdatacenter";
const props = defineProps({
  // 正常状态的设备数量
  status_cnt1: {
    type: Number,
    default: 0,
  },
  // 烧毁状态的设备数量
  status_cnt2: {
    type: Number,
    default: 0,
  },
  // 退化状态的设备数量
  status_cnt3: {
    type: Number,
    default: 0,
  },
  // 断电状态的设备数量
  status_cnt4: {
    type: Number,
    default: 0,
  },
  datatimestamp: {
    type: String,
    default: "",
  },
  // 测试时长
  testDuration: {
    type: String,
    default: "00 : 00 : 00",
  },
  // 电压值
  voltage: {
    type: String,
    default: "0",
  },
  // 温度值
  temperature: {
    type: String,
    default: "",
  },
  // 类型
  type: {
    type: String,
    default: "ic",
  },
  deviceid: {
    type: String,
    default: "",
  },

  testid: {
    type: String,
    default: "",
  },
  boardid: {
    type: String,
    default: "",
  },
  enableboardstatus: {
    type: String,
    default: "",
  },
  testInfo: {
    type: Object,
    default: {},
  },
  boardType: {
    type: String,
    default: "",
  },
  datasourceindex: {
    type: String,
    default: "",
  },
  status: {
    type: String,
    default: "",
  },
});
const formatMilliseconds = (ms) => {
  const hours = Math.floor(ms / (1000 * 60 * 60));
  const minutes = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((ms % (1000 * 60)) / 1000);
  return `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
};
const state = reactive({
  testcenterVisible: false,
});
// 计算属性判断 boardid 是否在 enableboardstatus 中
const isBoardDisabled = computed(() => {
  // 将 enableboardstatus 按逗号分割成数组
  const enabledBoardIds = props.enableboardstatus
    .trim()
    .replace(/^"|"$/g, "")
    .split(",");

  // 检查 boardid 是否在分割后的数组中，不存在则返回 true
  return !enabledBoardIds.includes(
    props.type.toUpperCase() + "_" + props.boardid
  );
});
const sendData = () => {
  ElMessageBox.confirm("关闭电流？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 准备发送的数据，包含系统配置和板卡配置
    const dataToSend = {
      datasourceindex: props.datasourceindex,
      type: props.type,
      deviceid: props.deviceid,
      message: {
        type: "单板操作",
        config: {
          componentid: `${props.boardid}`,
          control: "断电",
        },
      },
    };
    sendControl(dataToSend).then((res) => {
      ElMessage.success("操作下发");
      // 可添加成功提示
    });
  });
};
</script>

<style scoped>
/* 样式保持不变 */
.frame-ddQ-2 {
  position: relative;
  height: 222px;
  border-radius: 4px;
  mix-blend-mode: normal;
  display: flex;
  background: rgba(255, 255, 255, 1);
}

.vec-rectangle-Pmi-2 {
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 13px;
  width: 4px;
  height: 24px;
  mix-blend-mode: normal;
  background: rgba(42, 121, 250, 1);
}
.text-lwB-3 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 2;
  justify-content: start;
  left: 29px;
  top: 12px;
  height: 25px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
}
.frame-VFE-4 {
  position: absolute;
  z-index: 4;
  left: 3.2%;
  top: 123px;
  width: 100%;

  height: 83px;
  mix-blend-mode: normal;
}
.vec-rectangle-ABe-1 {
  position: absolute;
  z-index: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 83px;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(250, 250, 250, 1);
}
.frame-rFu-2 {
  position: absolute;
  z-index: 2;
  left: 2%;
  top: 35px;
  width: 98%;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 18px;
}
.text-Fha-4 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 3;
  justify-content: start;
  left: 0px;
  top: 21px;
  height: 18px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
}
.frame-YPa-7 {
  position: absolute;
  z-index: 7;
  left: 69.7161220225626%;
  top: 26.126126126126124%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  right: 5.047275290504239%;
  bottom: 47.2972972972973%;
}
.frame-EQG-3 {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 9px;
  width: 75px;
  height: 16px;
  mix-blend-mode: normal;
}

.text-avs-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  left: 19px;
  top: 1px;
  height: 14px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.45);
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
}
.img-Buz-2 {
  position: absolute;
  z-index: 1;
  border: unset !important;
  box-shadow: unset;
  left: 0px;
  top: 0px;
  width: 16px;
  height: 16px;
  border-radius: 1.33px;
  mix-blend-mode: normal;
  background: url("@/assets/images/device/testyxzt.png");
  background-size: 100% 100%;
}

.img-CwJ-2 {
  position: absolute;
  z-index: 1;
  border: unset !important;
  box-shadow: unset;
  left: 49.99998092652095%;
  top: 32.20338983050847%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;

  background: url("@/assets/images/device/testdy.png");
  background-size: 100% 100%;
  right: 0.00003814695810434032%;
  bottom: 0%;
}
.text-tYz-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  left: 0px;
  top: 0px;
  height: 14px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.45);
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
}
.text-ttP-3 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 2;
  justify-content: start;
  left: 0px;
  top: 21px;
  height: 18px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
}
.vec-rectangle-lXg-1 {
  position: absolute;
  z-index: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 59px;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(250, 250, 250, 1);
}
.frame-fQX-2 {
  position: absolute;
  z-index: 2;
  left: 5.000055313089251%;
  top: 16.94915254237288%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  right: 0.00009536739526085081%;
  bottom: 0%;
}
.text-dPE-2 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  left: 0px;
  top: 0px;
  height: 14px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.45);
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
}
.text-FyT-4 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 3;
  justify-content: start;
  left: 0px;
  top: 21px;
  height: 18px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
}
.frame-ZFD-2 {
  position: relative;

  width: 20%;
  height: 38px;
  mix-blend-mode: normal;
  display: flex;
  order: 1;
  flex-shrink: 0;
}

.text-qOT-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  left: 19px;
  top: 0%;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
  right: 18px;
  bottom: 57.89473684210527%;
}
.frame-itu-2 {
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 22px;
  width: 48px;
  height: 16px;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(255, 240, 238, 1);
  overflow: hidden;
}
.vec-circular-UGO-2 {
  position: absolute;
  z-index: 1;
  left: 8px;
  top: 6px;
  width: 4px;
  height: 4px;
  mix-blend-mode: normal;
  background: rgba(59, 179, 70, 1);
  border-radius: 50%;
}
.p-text-HHH-1 {
  display: inline;
  margin: 0px;
  width: 100%;
  text-align: center;
}
.text-HHH-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: center;
  left: 15px;
  top: 12.49939277768135%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(249, 57, 32, 1);
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: pre-wrap;
  right: 9px;
  bottom: 7.500613480806351%;
}
.frame-aGX-3 {
  position: relative;
  z-index: 3;
  width: 48px;
  height: 38px;
  mix-blend-mode: normal;
  display: flex;
  order: 2;
  flex-shrink: 0;
}
.text-riK-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  left: 19px;
  top: 0%;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
  right: 18px;
  bottom: 57.89473684210527%;
}
.frame-lEB-2 {
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 22px;
  width: 48px;
  height: 16px;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(252, 136, 0, 0.08);
  overflow: hidden;
}
.text-txX-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: center;
  left: 15px;
  top: 12.49939277768135%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(252, 136, 0, 1);
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: pre-wrap;
  right: 9px;
  bottom: 7.500613480806351%;
}
.vec-circular-HFJ-2 {
  position: absolute;
  z-index: 1;
  left: 8px;
  top: 6px;
  width: 4px;
  height: 4px;
  mix-blend-mode: normal;
  background: rgba(252, 136, 0, 1);
  border-radius: 50%;
}
.text-sOW-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  left: 19px;
  top: 0%;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
  right: 18px;
  bottom: 57.89473684210527%;
}
.frame-oWE-2 {
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 22px;
  width: 48px;
  height: 16px;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(110, 116, 122, 0.08);
  overflow: hidden;
}
.text-LKW-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: center;
  left: 15px;
  top: 12.49939277768135%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(110, 116, 122, 1);
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: pre-wrap;
  right: 9px;
  bottom: 7.500613480806351%;
}
.vec-circular-xAe-2 {
  position: absolute;
  z-index: 1;
  left: 8px;
  top: 6px;
  width: 4px;
  height: 4px;
  mix-blend-mode: normal;
  background: rgba(110, 116, 122, 1);
  border-radius: 50%;
}
.vec-circular-Qin-2 {
  position: absolute;
  z-index: 1;
  left: 8px;
  top: 6px;
  width: 4px;
  height: 4px;
  mix-blend-mode: normal;
  background: rgba(249, 57, 32, 1);
  border-radius: 50%;
}
.frame-RAu-3 {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 10px;
  width: 64px;
  height: 39px;
  mix-blend-mode: normal;
}
.vec-rectangle-rdK-1 {
  position: absolute;
  z-index: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 59px;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(250, 250, 250, 1);
}
.img-tUg-1 {
  position: absolute;
  z-index: 0;
  border: unset !important;
  box-shadow: unset;
  left: 47.36831749562815%;
  top: 18.367346938775512%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;

  background: url("@/assets/images/device/testwd.png");
  background-size: 100% 100%;
  right: 0.000040154756431286175%;
  bottom: 0%;
}
.p-text-avs-1 {
  display: inline;
  margin: 0px;
  width: 100%;
  text-align: left;
}

.vec-rectangle-bZV-1 {
  position: absolute;
  z-index: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 59px;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(250, 250, 250, 1);
}
.frame-jOr-2 {
  position: absolute;
  z-index: 2;
  left: 7.079646017699115%;
  top: 16.94887550948627%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  right: 0%;
  bottom: 0.00020689797860674902%;
}

.img-mNF-1 {
  position: absolute;
  z-index: 0;
  border: unset !important;
  box-shadow: unset;
  left: 61.904761904761905%;
  top: 18.36700630278269%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;

  background: url("@/assets/images/device/testcssc.png");
  background-size: 100% 100%;
  right: 0%;
  bottom: 0.00024912184549463144%;
}
.text-Lqx-2 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  left: 0px;
  top: 0px;
  height: 14px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.45);
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
}
.frame-jOr-2 {
  z-index: 2;
  left: 7.079646017699115%;
  top: 16.94887550948627%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  right: 0%;
  bottom: 0.00020689797860674902%;
}
.frame-Ill-8 {
  position: absolute;
  z-index: 8;
  top: 15px;
  width: 60px;
  height: 20px;
  mix-blend-mode: normal;
  right: 13px;
}
.img-AiC-1 {
  position: absolute;
  z-index: 0;
  border: unset !important;
  box-shadow: unset;
  top: -0.00146484375px;
  width: 20.00146484375px;
  height: 20.0029296875px;
  mix-blend-mode: normal;
  background-image: url("@/assets/images/device/testck.png");
  background-size: 100% 100%;
  right: 0px;
}
.text-vmW-2 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  left: 0px;
  top: 2px;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(42, 121, 250, 1);
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
}
.p-text-vmW-2 {
  display: inline;
  margin: 0px;
  width: 100%;
  text-align: right;
}
.frame-MzU-5 {
  position: absolute;
  z-index: 5;
  left: 3.2%;
  top: 26.126071139498876%;
  width: 37%;
  height: auto;
  mix-blend-mode: normal;
  right: 59.305993690851736%;
  bottom: 47.29724231067004%;
}

.frame-OqG-6 {
  position: absolute;
  z-index: 6;
  left: 41.586745975145405%;
  top: 26.126126126126124%;
  width: 30%;
  height: auto;
  mix-blend-mode: normal;
  right: 32.17665133792143%;
  bottom: 47.2972972972973%;
}
.frame-YPa-7 {
  position: absolute;
  z-index: 7;
  left: 73%;
  top: 26.126126126126124%;
  width: 30%;
  height: auto;
  mix-blend-mode: normal;
  right: 5.047275290504239%;
  bottom: 47.2972972972973%;
}
.frame-bPs-1 {
  position: relative;
  text-align: center;

  width: 20%;
  height: 38px;
  mix-blend-mode: normal;
  display: flex;
  order: 0;
  flex-shrink: 0;
}
.text-AbU-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  left: 19px;
  top: 0%;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
  right: 18px;
  bottom: 57.89473684210527%;
}
.p-text-AbU-1 {
  display: inline;
  margin: 0px;
  width: 100%;
  text-align: center;
}

.frame-wnT-2 {
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 22px;
  width: 100%;
  height: 16px;
  border-radius: 2px;
  mix-blend-mode: normal;
  background: rgba(59, 179, 70, 0.08);
  overflow: hidden;
}
.text-jKj-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: center;
  left: 15px;
  top: 12.49939277768135%;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(59, 179, 70, 1);
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: pre-wrap;
  right: 9px;
  bottom: 7.500613480806351%;
}
/* 新增暗灰色样式 */
.dark-gray {
  filter: grayscale(100%);
  opacity: 0.6;
}
</style>
